@import url("~assets/less/index.less");

.daytime {
  .van-divider {
    border-color: #DBDCE0;
  }

  .currency {
    .btn-group {
      /deep/.van-button {
        background-color: #0bba99;
        border-color: #DBDCE0;
        color: #FFFFFF;
      }
    }

    .select {
      /deep/.van-dropdown-menu__bar {
        background-color: #F3F3F3 !important;

        .van-dropdown-menu__title {
          color: #1A1A1A;
        }
      }
    }
    .select2{
      margin: 0.32rem 0;
    height: 0.853333rem;
    border-radius: 0.106667rem;
      /deep/.van-dropdown-menu__bar {
        background-color: #F3F3F3 !important;

        .van-dropdown-menu__title {
          color: #1A1A1A;
        }
      }
    }

    .currency-top-left-optimalPrice {
      p {
        background-color: #F3F3F3;
        color: #1A1A1A;
      }

      /deep/.van-stepper__minus,
      /deep/input,
      /deep/.van-stepper__plus {
        background-color: #F3F3F3 !important;
        color: #1A1A1A !important;
      }
    }

    .transactionAmount {
      background-color: #F3F3F3 !important;

      .van-button {
        color: #1A1A1A !important;
      }

      /deep/input::-webkit-input-placeholder {
        color: #ABACB7 !important;
      }

      /deep/input {
        text-indent: 16px;
        color: #1A1A1A !important;
      }
    }

    .available {
      color: #878999;
    }

    .progress {
      p {
        background-color: #DBDCE0;
      }


      span {
        color: #ABACB7
      }
    }

    &-driver {
      background-color: #F3F3F3;
    }

    &-bottom {
      .bottom-title {
        border-bottom: 1px solid #DBDCE0;

        .van-cell__title {
          color: #878999;
        }
      }

      .bottom-content {
        .list-data {
          .title-left span:nth-child(2) {
            color: #1A1A1A;
          }

          .title-right {
            background-color: #F8EEDC;
            color: #DAAB51;
          }
        }

        .every-content {
          p {
            &:first-child {
              color: #878999;
            }

            &:nth-child(2) {
              color: #1A1A1A;
            }
          }
        }
      }
    }
  }


}

.darknight {
  .van-divider {
    border-color: #2B3447;
  }

  .currency {
    .btn-group {
      /deep/.van-button {
        background-color: #191B27;
        border-color: #000000;
        color: #6C7993;
      }
    }

    .select {
      /deep/.van-dropdown-menu__bar {
        background-color: #000000;

        .van-dropdown-menu__title {
          color: #DDE2EC;
        }
      }
    }

    .van-popup {
      background-color: #191b27;
    }

    .currency-top-left-optimalPrice {
      p {
        background-color: #000000;
        color: #DDE2EC;
      }

      /deep/.van-stepper__minus,
      /deep/input,
      /deep/.van-stepper__plus {
        background-color: #000000 !important;
        color: #DDE2EC !important;
      }
    }

    .transactionAmount {
      background-color: #000000 !important;

      .van-button {
        color: #DDE2EC !important;
      }

      /deep/input::-webkit-input-placeholder {
        color: #6C7993 !important;
      }

      /deep/input {
        text-indent: 16px;
        color: #DDE2EC !important;
      }
    }

    .available {
      color: #DDE2EC;
    }

    .progress {
      p {
        background-color: #000000;
      }

      span {
        color: #6C7993;
      }
    }

    &-driver {
      background-color: #2B3447;
    }

    &-bottom {
      .bottom-title {
        border-bottom: 1px solid #2B3447;

        .van-cell__title {
          color: #6C7993;
        }
      }

      .bottom-content {
        .list-data {
          .title-left span:nth-child(2) {
            color: #DDE2EC;
          }

          .title-right {
            background-color: #000000;
            color: #6C7993;
          }
        }

        .every-content {
          p {
            &:first-child {
              color: #6C7993;
            }

            &:nth-child(2) {
              color: #DDE2EC;
            }
          }
        }
      }
    }
  }


}


.currency {
  &-top {
    display: flex;
    margin: 12px;

    &-left {
      width: 204px;
      margin-right: 12px;

      &-buy {
        .btn-group {
          /deep/.van-button {
            width: 98px;
            height: 32px;
            border-radius: 4px;
            font-family: Roboto-Regular, Roboto;
          }
        }

        .select {
          margin: 12px 0;
          height: 32px;


          /deep/.van-dropdown-menu__bar {
            height: 100%;
            border-radius: 4px;

            .van-dropdown-menu__title {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              height: 100%;
              padding: 0 32px;

              &::after {
                right: 13px;
              }
            }
          }

          // &>div {
          //   /deep/.van-dropdown-item {
          //     width: 204px;
          //     left: 12px;
          //   }
          // }


          border-radius: 4px;
        }
      }

      &-optimalPrice {
        margin: 12px 0;

        p {
          height: 32px;
          line-height: 32px;
          text-align: center;
          font-size: 14px;
          font-family: Roboto-Regular, Roboto;
          font-weight: 400;
          border-radius: 4px;
        }

        .van-cell {
          height: 32px;
          padding: 0;
          background-color: transparent;

          .van-stepper {

            /deep/.van-stepper__minus,
            /deep/input,
            /deep/.van-stepper__plus {
              &::before {
                font-size: 12px;
              }
            }

            /deep/.van-stepper__minus,
            /deep/.van-stepper__plus {
              width: 32px;

              &::after {
                height: 20%;
              }

              &::before {
                width: 20%;
              }
            }

            /deep/input {
              margin: 0 1px;
              width: 138px;
            }
          }
        }
      }

      .transactionAmount {
        padding: 0;

        &::after {
          border: none;
        }

        .van-button {
          background-color: transparent;
          border-color: transparent;
        }

        /deep/input {
          text-indent: 16px;
        }
      }

      .available {
        margin: 11px 0;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
      }

      .progress {
        display: flex;

        &>div {
          text-align: center;

          p {
            width: 48px;
            height: 8px;
            margin-bottom: 5px;

            &:not(:last-child) {
              margin-right: 4px;
            }
          }

          span {
            color: #6C7993;
          }
        }

        .progress-buy-active {
          p {
            background-color: #0BBA99;
          }

          span {
            color: #0BBA99;
          }
        }

        .progress-sell-active {
          p {
            background-color: #EE3E57;
          }

          span {
            color: #EE3E57;
          }
        }
      }

      .buy-dot {
        margin: 12px 0;

        .van-button {
          width: 100%;
          height: 40px;
          background-color: #0BBA99;
          border-radius: 4px;
          font-family: Roboto-Regular, Roboto;
        }
      }
    }

    &-right {
      flex: 1;
      padding: 0px 0px;
      justify-content: space-between;
      p {
        padding: 5px 0;
      }

      &-title {
        display: flex;
        font-family: Roboto-Regular, Roboto;
        color: #6C7993;
        justify-content: space-between;


      }

      &-content {
        &>div {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }

  &-driver {
    width: 100%;
    height: 8px;
    background-color: #2B3447;
  }

  &-bottom {
    .bottom-title {
      background-color: transparent;
      border-bottom: 1px solid #2B3447;

      &::after {
        display: none;
      }

      .van-cell__title {
        color: #6C7993;
      }

      img {
        width: 24px;
      }
    }

    .bottom-content {
      .nodata {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 132px;

        div {
          img {
            width: 64px;
          }

          p {
            color: #6C7993;
            text-align: center;
          }
        }
      }

      .list-data {
        .data-every {
          padding: 12px;

          .every-title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title-left {
              span {
                font-family: Roboto-Medium, Roboto;
                font-size: 14px;

                &:nth-child(2) {
                  margin-left: 4px;
                  font-weight: 500;
                }
              }
            }

            .title-right {
              width: 45px;
              text-align: center;
              height: 20px;
              line-height: 20px;
              border-radius: 4px;
            }
          }

          .every-content {
            .data {
              display: flex;
              flex-wrap: wrap;

              &>div {
                width: 33.333%;
                margin: 14px 0 10px 0;
                text-align: right;

                &:nth-child(n+4) {
                  margin: 0px 0 10px 0;
                }

                .text_left {
                  text-align: left;
                }

                p {
                  font-size: 12px;
                  font-family: Roboto-Regular, Roboto;
                  font-weight: 400;

                  &:first-child {
                    margin-bottom: 8px;
                  }
                }
              }
            }

          }
        }
      }
    }
  }

  .place-popup {
    width: 280px;
    background-color: @white;
    border-radius: 8px;

    &-title {
      position: relative;
      height: 48px;
      line-height: 48px;

      p {
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #DAAB51;
        text-align: center;
      }

      i {
        position: absolute;
        top: 16px;
        right: 16px;
        font-size: 16px;
        color: #878999;
      }
    }

    &-content {
      margin: 12px;

      &-echarts {
        height: 170px;
        background-color: #0BBA99;
      }

      &-continue {
        margin: 12px 0;
        padding: 24px 0;
        text-align: center;

        h1 {
          font-size: 24px;
          font-family: Roboto-Medium, Roboto;
          font-weight: 500;
          color: #DAAB51;
        }

        p {
          font-size: 14px;
          font-family: Roboto-Regular, Roboto;
          color: #878999;
        }
      }

      &-info {
        padding: 12px;
        background-color: #F3F3F3;
        border-radius: 4px;
        margin-top: 12px;

        p {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          font-family: Roboto-Regular, Roboto;

          &:not(:first-child) {
            margin-top: 8px;
          }

          .label {
            color: #878999;
          }

          .value {
            font-weight: 600;
            color: #1A1A1A;
          }
        }
      }
    }

    &-footer {
      text-align: center;
      margin-bottom: 12px;

      .van-button {
        width: 200px;
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
      }
    }

  }


  .l-s-popup {
    background-color: @white;
    font-family: Roboto-Medium, Roboto;

    /deep/.van-tabs__nav {
      background-color: @white;
    }

    /deep/.van-tab--active {
      color: #FDC706;
    }

    &-content {
      margin: 12px;

      .info {
        padding: 12px;
        background-color: #F3F3F3;

        p {
          display: flex;
          justify-content: space-between;

          &:nth-child(2) {
            margin: 4px 0;
          }

          .info-left {
            color: #878999;
            font-size: 14px;
          }

          .info-right {
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #1A1A1A;
          }
        }
      }

      .desc {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;

        p {
          color: #6C7993;
        }
      }

      .btn {
        padding: 12px;

        .van-button {
          width: 100%;
          border-radius: 200px;
          font-family: Roboto-Medium, Roboto;
        }
      }
    }
  }

}